<template>
    <el-container>
        <el-header>
            <el-button-group class="ml-4">
                <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                    open
                </el-button>
                <el-button type="primary" icon="Edit" @click="router.push({
                    name: 'edit', params: { children: route.params.children },
                    query: { id: route.query.id }
                })">编辑</el-button>
                <el-button type="primary" icon="Share" />
                <el-button type="primary" icon="Delete" />
            </el-button-group>
        </el-header>
        <el-main>这里是详情</el-main>
    </el-container>



    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
        {{ route.query }}
        <span>Hi there!</span>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import { useStore } from '@/stores'
const sotre = useStore()
console.log('👩‍👧‍👧', sotre)
const route = useRoute()
console.log('👨‍👨‍👧', route)
const drawer = ref(false)


</script>